<template>
    <n-spin :show="loading">
        <n-space vertical :size="12">
            <n-space justify="space-between">
                <n-space></n-space>
                <n-space>
                    <n-form inline :model="param" :show-label="false" :show-feedback="false" ref="formRef">
                        <n-form-item>
                            <City v-model:value="param.query.area" :clear="true" :prov="true"></City>
                        </n-form-item>
                        <n-form-item>
                            <n-input v-model:value="param.query.mob" style="width: 200px" clearable placeholder="客户电话" />
                        </n-form-item>
                        <n-form-item>
                            <n-input v-model:value="param.query.name" style="width: 200px" clearable placeholder="客户名称" />
                        </n-form-item>
                    </n-form>

                    <n-button @click="doQuery">
                        <template #icon>
                            <n-icon :component="YoutubeSearchedForRound" />
                        </template>
                        查询
                    </n-button>
                </n-space>
            </n-space>
            <n-data-table striped size="large" :max-height="height" :min-height="items.length > 0 ? height : 0" :row-key="(row:any) => row.id" :columns="columns" :data="items" :row-props="rowProps" />
            <n-space justify="end">
                <n-pagination show-size-picker :page="param.pager.page" :page-size="param.pager.size" :page-count="pager.all" :page-sizes="[10, 25, 50, 100]" @update:page="onChangePage" @update:page-size="onChangeSize">
                    <template #prefix="{}">当前 {{ pager.now }} / {{ pager.all }} 页，共 {{ pager.row }} 条数据</template>
                </n-pagination>
            </n-space>
        </n-space>
        <View :item="data" v-model:show="viewActive" v-if="viewActive"></View>
    </n-spin>
</template>

<script lang="ts" setup>
import { h, ref, computed, onActivated } from 'vue'
import { NSpace, NText, NIcon, NButton, NTag, NTooltip } from 'naive-ui'
import { YoutubeSearchedForRound } from '@vicons/material'
import City from '@/comp/func/City.vue'

import { useStore } from '@/store'
import { Http } from '@/libs'

import View from './View.vue'

const store = useStore()

const loading = computed(() => store.state.loading.flag)

const rowProps = (row: any) => {
    return {
        style: 'cursor: pointer;',
        onClick: () => {
            data.value = row
            viewActive.value = true
        },
    }
}

const columns = [
    {
        type: 'selection',
        fixed: 'left',
        align: 'center',
    },
    {
        title: '客户信息',
        key: 'type',
        width: 300,
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []

            if (row.type == 2) {
                comps[comps.length] = h(NTag, { bordered: false, size: 'small', type: 'info' }, { default: () => '门店' })
            } else {
                comps[comps.length] = h(NTag, { bordered: false, size: 'small', type: 'warning' }, { default: () => '会员' })
            }
            comps[comps.length] = h(NText, { type: 'success' }, { default: () => '[ ' + row.phone + ' ]' })
            comps[comps.length] = h(NText, {}, { default: () => row.name })
            return h(NSpace, {}, { default: () => comps })
        },
    },
    {
        title: '注册日期',
        key: 'time',
        width: 120,
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(NText, {}, { default: () => row.create })
            return h(NSpace, {}, { default: () => comps })
        },
    },
    {
        title: '实名信息',
        key: 'real',
        width: 300,
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            if (row.sno) {
                comps[comps.length] = h(NText, {}, { default: () => row.real || '未填写' })
                comps[comps.length] = h(NText, {}, { default: () => row.sno })
            } else {
                comps[comps.length] = h(NText, {}, { default: () => '未实名认证' })
            }
            return h(NSpace, {}, { default: () => comps })
        },
    },
    {
        title: '最近下单',
        key: 'type',
        width: 300,
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            if (row.count > 0) {
                comps[comps.length] = h(NText, {}, { default: () => row.order.time })
                comps[comps.length] = h(NText, {}, { default: () => row.order.mch.name })
            } else {
                comps[comps.length] = h(NText, {}, { default: () => '未下单' })
            }
            return h(NSpace, {}, { default: () => comps })
        },
    },
    {
        title: '订单信息',
        key: 'type',
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            if (row.count > 0) {
                comps[comps.length] = h(NText, {}, { default: () => '共' + row.count + '单' })
                comps[comps.length] = h(NText, {}, { default: () => row.mchs + '家门店' })
                comps[comps.length] = h(NText, {}, { default: () => (row.total / 100).toFixed(2) + '元' })
                comps[comps.length] = h(NText, {}, { default: () => '平均' + (row.total / row.count / 100).toFixed(2) + '元' })
            } else {
                comps[comps.length] = h(NText, {}, { default: () => '未下单' })
            }

            return h(NSpace, {}, { default: () => comps })
        },
    },
]

const height = computed(() => store.state.browser.innerHeight - 310)

const onChangeSize = (size: number) => {
    param.value.pager.page = 1
    param.value.pager.size = size
    execLoad()
}

const onChangePage = (page: number) => {
    param.value.pager.page = page
    execLoad()
}

const param = ref({
    query: {
        area: '',
        mob: '',
        name: '',
    },
    pager: {
        page: 1,
        size: 10,
        time: new Date().getTime(),
    },
})

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref([])

const doQuery = () => {
    param.value.pager.page = 1
    execLoad()
}

const execLoad = () => {
    param.value.query.area = param.value.query.area + ''
    Http.post('/ops/biz/customer/list', param.value).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        pager.value = resp.data.pager
        items.value = resp.data.items
    })
}

const data = ref<any>({})

const viewActive = ref(false)

onActivated(() => {
    execLoad()
})
</script>
